<template>
  <ContentWrap title="数字资源合同信息(必填)">
    <!-- 搜索工作栏 -->
    <el-form
      ref="queryFormRef"
      :inline="true"
      :model="queryParams"
      class="-mb-15px"
      label-width="130px"
    >
      <el-form-item label="合同名称:" prop="name">
        <el-input
          v-model="queryParams.name"
          class="!w-240px"
          clearable
          placeholder="请输入合同名称"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="合同签订时间:" prop="time">
        <el-date-picker
          v-model="value3"
          type="datetime"
          placeholder="选择时间"
          :default-time="defaultTime"
        />
      </el-form-item>
      <el-form-item label="合同编号:" prop="copyrightNumber">
        <el-input
          v-model="queryParams.copyrightNumber"
          class="!w-240px"
          clearable
          placeholder="请输入合同编号"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="项目编号:" prop="copyrightNumber">
        <el-input
          v-model="queryParams.copyrightNumber"
          class="!w-240px"
          clearable
          placeholder="请输入项目编号"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="资金总额(元):" prop="copyrightNumber">
        <el-input
          v-model="queryParams.copyrightNumber"
          class="!w-240px"
          clearable
          placeholder="请输入合同编号"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="发票类型:" prop="validity">
        <el-radio-group v-model="validity" class="!w-240px">
          <el-radio label="always" size="large">纸质普票</el-radio>
          <el-radio label="notAlways" size="large">专用发票</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="资金结算方式:" prop="validity">
        <el-radio-group v-model="validity" class="!w-240px">
          <el-radio label="always" size="large">一次性结算</el-radio>
          <el-radio label="notAlways" size="large">分阶段结算</el-radio>
        </el-radio-group>
      </el-form-item>
      <br />
      <el-form-item>
        <el-button plain type="primary" @click="onAddItemStage()">
          <Icon class="mr-5px" icon="ep:plus" />
          添加阶段
        </el-button>
      </el-form-item>
      <el-table
        :data="stageTableData"
        style="width: 100%"
        max-height="250"
        :cell-style="{ height: '60px' }"
      >
        <el-table-column prop="stage" label="阶段" />
        <el-table-column prop="expires" label="期限(天)">
          <template #default="scope">
            <input
              type="text"
              v-model="scope.row.expires"
              class="ipt"
              style="min-width: 60px"
              @blur="iptBlur(scope.row, $event)"
            />
            <span>天</span>
          </template>
        </el-table-column>
        <el-table-column prop="amount" label="结算金额(元)">
          <template #default="scope">
            <input
              type="text"
              v-model="scope.row.amount"
              class="ipt"
              style="min-width: 60px"
              @blur="iptBlur(scope.row, $event)"
            /><span>元</span>
          </template>
        </el-table-column>
        <el-table-column prop="percentum" label="占总额百分比(%)" />
        <el-table-column prop="states" label="付款状态">
          <template #default="{ row }">
            <el-select v-model="row.states" placeholder="付款状态" style="width: 110px">
              <el-option
                v-for="item in stateOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="付款日期">
          <template #default="{ row }">
            <!-- <el-button type="info"
              >日期选择器
              {{ row }}
            </el-button> -->
            <el-date-picker v-model="row.date" type="date" placeholder="付款日期" />
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="scope">
            <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.$index)">
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <br />
      <el-form-item label="合同附件:" prop="name">
        <template #default=""
          ><el-upload
            v-model:file-list="fileList"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>
          <el-dialog v-model="dialogVisible" align-center>
            <img w-full :src="dialogImageUrl" alt="Preview Image" /> </el-dialog
        ></template>
      </el-form-item>
      <el-divider border-style="double" />
      <div class="div-info">
        <div class="div-A inline-div">
          <el-form-item>
            <span><h3>甲方信息</h3></span>
          </el-form-item>
          <br />
          <el-form-item label="甲方:" prop="name">
            <el-input
              v-model="queryParams.name"
              class="!w-240px"
              clearable
              placeholder="甲方"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item label="甲方法人:" prop="name">
            <el-input
              v-model="queryParams.name"
              class="!w-240px"
              clearable
              placeholder="甲方法人"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item label="甲方联系人:" prop="name">
            <el-input
              v-model="queryParams.name"
              class="!w-240px"
              clearable
              placeholder="甲方联系人"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item label="甲方通讯录地址:" prop="name">
            <el-input
              v-model="queryParams.name"
              class="!w-240px"
              clearable
              placeholder="甲方通讯录地址"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item label="甲方账号名称:" prop="name">
            <el-input
              v-model="queryParams.name"
              class="!w-240px"
              clearable
              placeholder="甲方账号名称"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item label="甲方账号:" prop="name">
            <el-input
              v-model="queryParams.name"
              class="!w-240px"
              clearable
              placeholder="甲方账号"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item label="甲方开户银行:" prop="name">
            <el-input
              v-model="queryParams.name"
              class="!w-240px"
              clearable
              placeholder="甲方开户银行"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
        </div>
        <el-divider direction="vertical" />
        <div class="div-B inline-div">
          <el-form-item>
            <span><h3>乙方信息</h3></span>
          </el-form-item>
          <br />
          <el-form-item label="乙方:" prop="name">
            <el-input
              v-model="queryParams.name"
              class="!w-240px"
              clearable
              placeholder="请输入合同名称"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item label="甲方法人:" prop="name">
            <el-input
              v-model="queryParams.name"
              class="!w-240px"
              clearable
              placeholder="甲方法人"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item label="甲方联系人:" prop="name">
            <el-input
              v-model="queryParams.name"
              class="!w-240px"
              clearable
              placeholder="甲方联系人"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item label="甲方通讯录地址:" prop="name">
            <el-input
              v-model="queryParams.name"
              class="!w-240px"
              clearable
              placeholder="甲方通讯录地址"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item label="甲方账号名称:" prop="name">
            <el-input
              v-model="queryParams.name"
              class="!w-240px"
              clearable
              placeholder="甲方账号名称"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item label="甲方账号:" prop="name">
            <el-input
              v-model="queryParams.name"
              class="!w-240px"
              clearable
              placeholder="甲方账号"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item label="甲方开户银行:" prop="name">
            <el-input
              v-model="queryParams.name"
              class="!w-240px"
              clearable
              placeholder="甲方开户银行"
              @keyup.enter="handleQuery"
            /> </el-form-item></div
      ></div>
      <el-divider border-style="double" />
      <el-form-item>
        <el-button plain type="primary" @click="onAddItemStage()">
          <Icon class="mr-5px" icon="ep:plus" />
          添加第三方
        </el-button>
      </el-form-item>
      <br />
      <div class="div-C inline-div">
        <el-form-item>
          <span><h3>添加第三方</h3></span>
        </el-form-item>
        <br />
        <el-form-item label="名称:" prop="name">
          <el-input
            v-model="queryParams.name"
            class="!w-240px"
            clearable
            placeholder="名称"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="法人:" prop="name">
          <el-input
            v-model="queryParams.name"
            class="!w-240px"
            clearable
            placeholder="法人"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="联系人1:" prop="name">
          <el-input
            v-model="queryParams.name"
            class="!w-240px"
            clearable
            placeholder="联系人1"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="通讯地址:" prop="name">
          <el-input
            v-model="queryParams.name"
            class="!w-240px"
            clearable
            placeholder="通讯地址"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="账号名称:" prop="name">
          <el-input
            v-model="queryParams.name"
            class="!w-240px"
            clearable
            placeholder="账号名称"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="账号:" prop="name">
          <el-input
            v-model="queryParams.name"
            class="!w-240px"
            clearable
            placeholder="账号"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="开户银行:" prop="name">
          <el-input
            v-model="queryParams.name"
            class="!w-240px"
            clearable
            placeholder="开户银行"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
      </div>
    </el-form>
  </ContentWrap>
  <ContentWrap title="数字资源版权信息">
    <!-- 搜索工作栏 -->
    <el-form
      ref="queryFormRef"
      :inline="true"
      :model="queryParams"
      class="-mb-15px"
      label-width="72px"
    >
      <el-form-item label="版权编号:" prop="name">
        <el-input
          v-model="queryParams.name"
          class="!w-240px"
          clearable
          disabled
          placeholder=""
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="著作权人:" prop="copyrightNumber">
        <el-input
          v-model="queryParams.copyrightNumber"
          class="!w-240px"
          clearable
          placeholder="请输入著作权人"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <br />
      <el-form-item label="版权期限:" prop="validity">
        <el-radio-group v-model="validity" class="!w-240px">
          <el-radio label="always" size="large">永久版权</el-radio>
          <el-radio label="notAlways" size="large">非永久版权</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="选择时间:" prop="time">
        <el-date-picker
          v-model="value3"
          type="datetime"
          placeholder="选择时间"
          :default-time="defaultTime"
        />
      </el-form-item>
    </el-form>
  </ContentWrap>
  <ContentWrap title="资源信息(必填)">
    <!-- 搜索工作栏 -->
    <el-form
      ref="queryFormRef"
      :inline="true"
      :model="queryParams"
      class="-mb-15px"
      label-width="72px"
    >
      <el-form-item>
        <el-button @click="openForm('create')">
          <Icon class="mr-5px" icon="ep:plus" />
          添加资源
        </el-button>
      </el-form-item>
    </el-form>
    <br />
    <el-table v-loading="loading" :data="list">
      <el-table-column align="center" label="ID" prop="id" :width="50" />
      <el-table-column align="center" label="资源名称" prop="name" />
      <el-table-column align="center" label="DOI" prop="type" />
      <el-table-column align="center" label="资源类型" prop="copyrightNumber" />
      <el-table-column align="center" label="所属库" prop="copyrightValidity" />
      <el-table-column align="center" label="操作">
        <template #default="scope">
          <el-button
            v-hasPermi="['system:role:delete']"
            link
            type="danger"
            @click="handleDelete(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
      v-model:limit="queryParams.pageSize"
      v-model:page="queryParams.pageNo"
      :total="total"
      @pagination="getList"
    />
  </ContentWrap>

  <!-- 表单弹窗：添加/修改 -->
  <CopyrightForm ref="formRef" @success="getList" />
  <!-- 表单弹窗：菜单权限 -->
  <!-- <RoleAssignMenuForm ref="assignMenuFormRef" @success="getList" /> -->
  <!-- 表单弹窗：数据权限 -->
  <!-- <RoleDataPermissionForm ref="dataPermissionFormRef" @success="getList" /> -->
</template>
<script lang="ts" setup>
import * as microCopyrightApi from '@/api/copyright/microCopyright'
import type { UploadProps, UploadUserFile } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { ref } from 'vue'
import dayjs from 'dayjs'
//照片墙
const fileList = ref<UploadUserFile[]>([])
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}
//失焦事件，使用事件对象拿到dom元素并进行后续样式的修改
const iptBlur = (value: any, e: any) => {
  console.log(value)
}

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const validity = ref('always') // 版权期限
const value3 = ref('') // 时间选择器
const defaultTime = new Date(2000, 1, 1, 12, 0, 0) // 时间选择器
const stageTableData = ref([
  {
    stage: '第一阶段',
    expires: '30',
    amount: '10000',
    percentum: '10000',
    states: '0',
    date: '2016-05-01'
  },
  {
    stage: '第二阶段',
    expires: '30',
    amount: '10000',
    percentum: '10000',
    states: '1',
    date: '2017-06-01'
  },
  {
    stage: '第三阶段',
    expires: '30',
    amount: '10000',
    percentum: '10000',
    states: '0',
    date: '2018-07-01'
  }
])
const stateOptions = [
  {
    value: '0',
    label: '已付款'
  },
  {
    value: '1',
    label: '待付款'
  }
]

// 添加阶段
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  name: '21321XXXX',
  copyrightNumber: '',
  copyrightStatus: '',
  createTime: []
})
const queryFormRef = ref() // 搜索的表单
const now = new Date()
/** 添加阶段 */
const onAddItemStage = () => {
  now.setDate(now.getDate() + 1)
  stageTableData.value.push({
    stage: '第一阶段',
    expires: '30',
    amount: '10000',
    percentum: '10000',
    states: '0',
    date: dayjs(now).format('YYYY-MM-DD')
  })
}

/** 移除阶段 */
const deleteRow = (index: number) => {
  stageTableData.value.splice(index, 1)
}

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await microCopyrightApi.getMicroCopyrightPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 初始化 **/
onMounted(() => {
  getList()
})
</script>
<style lang="scss" scoped>
.eidt-row-p {
  width: 100%;
  height: 32px;
  margin: 0;
  line-height: 32px;
  text-align: center;
}

// 设置表格中输入框为边框为0
.ipt {
  width: 60px;
  height: 23px;
  margin-right: 5px;
  border: 1px solid rgb(187 187 187 / 100%);
  border-radius: 3px;
  outline: none;
}

.div-A {
  width: 45%;
  height: 200px;
}

.div-B {
  width: 50%;
  height: 200px;
}

.div-C {
  width: 50%;
  height: 200px;
}

.inline-div {
  display: inline-block;
}
</style>
